<template>
  <a-drawer
    :open="visible"
    title="资源详情"
    placement="right"
    width="80%"
    :closable="true"
    @close="handleClose"
  >
    <div v-if="resource" class="detail-content">
      <a-tabs v-model="activeTab">
        <a-tab-pane key="basic" tab="基本信息">
          <a-descriptions :column="1" bordered size="small">
            <a-descriptions-item label="资源名称">
              {{ resource.name }}
            </a-descriptions-item>
            <a-descriptions-item label="资源编码">
              {{ resource.code }}
            </a-descriptions-item>
            <a-descriptions-item label="资源类型">
              <a-tag :color="getResourceTypeColor(resource.resource_type)">
                {{ resource.resource_type_name }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="子类型">
              {{ resource.resource_sub_type_name }}
            </a-descriptions-item>
            <a-descriptions-item label="层级">
              {{ resource.level }}
            </a-descriptions-item>
            <a-descriptions-item label="上级资源">
              {{ resource.parent_name || '无' }}
            </a-descriptions-item>
            <a-descriptions-item label="状态">
              <a-tag :color="resource.status === 1 ? 'green' : 'red'">
                {{ resource.status === 1 ? '启用' : '禁用' }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="业务类型">
              <a-tag :color="getBusinessTypeColor(resource.business_type)">
                {{ resource.business_type_name }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="描述">
              {{ resource.description }}
            </a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>

        <a-tab-pane key="properties" tab="属性配置">
          <div class="properties-section">
            <a-button type="primary" size="small" @click="handleEditProperties">
              编辑属性
            </a-button>
            <pre>{{ formatJson(resource.properties) }}</pre>
          </div>
        </a-tab-pane>

        <a-tab-pane key="pricing" tab="计价策略">
          <div class="pricing-section">
            <a-button type="primary" size="small" @click="handleEditPricing">
              设置价格
            </a-button>
            <pre>{{ formatJson(resource.resource_pricing) }}</pre>
          </div>
        </a-tab-pane>

        <a-tab-pane key="logs" tab="日志记录">
          <div class="logs-section">
            <a-timeline>
              <a-timeline-item v-for="log in resourceLogs" :key="log.id">
                <template #dot>
                  <IconifyIcon :icon="log.icon" :style="{ color: log.color }" />
                </template>
                <div class="log-item">
                  <div class="log-title">{{ log.title }}</div>
                  <div class="log-time">{{ log.time }}</div>
                  <div class="log-content">{{ log.content }}</div>
                </div>
              </a-timeline-item>
            </a-timeline>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { IconifyIcon } from '@vben/icons';

interface Props {
  visible?: boolean;
  resource?: any;
}

interface Emits {
  (e: 'close'): void;
  (e: 'edit-properties', resource: any): void;
  (e: 'edit-pricing', resource: any): void;
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  resource: null,
});

const emit = defineEmits<Emits>();

const activeTab = ref('basic');

// 模拟日志数据
const resourceLogs = ref([
  {
    id: 1,
    title: '资源创建',
    time: '2024-01-15 10:30:00',
    content: '管理员创建了该资源',
    icon: 'ant-design:plus-circle-outlined',
    color: '#52c41a',
  },
  {
    id: 2,
    title: '属性更新',
    time: '2024-01-16 14:20:00',
    content: '更新了资源属性配置',
    icon: 'ant-design:edit-outlined',
    color: '#1890ff',
  },
  {
    id: 3,
    title: '状态变更',
    time: '2024-01-17 09:15:00',
    content: '资源状态从禁用改为启用',
    icon: 'ant-design:check-circle-outlined',
    color: '#52c41a',
  },
]);

const handleClose = () => {
  emit('close');
};

const handleEditProperties = () => {
  emit('edit-properties', props.resource);
};

const handleEditPricing = () => {
  emit('edit-pricing', props.resource);
};

const formatJson = (jsonString: string) => {
  try {
    return JSON.stringify(JSON.parse(jsonString), null, 2);
  } catch {
    return jsonString || '暂无数据';
  }
};

const getResourceTypeColor = (type: string) => {
  const resourceTypeConfig = {
    PHYSICAL: '#52c41a',
    HUMAN: '#1890ff',
    DIGITAL: '#722ed1',
    SERVICE: '#fa8c16',
  };
  return resourceTypeConfig[type as keyof typeof resourceTypeConfig] || '#666';
};

const getBusinessTypeColor = (type: string) => {
  const businessTypeConfig = {
    HOTEL: '#1890ff',
    APARTMENT: '#52c41a',
    SPA: '#eb2f96',
    SCENIC: '#13c2c2',
    RESTAURANT: '#fa8c16',
    MEDICAL_BEAUTY: '#722ed1',
    BEAUTY_SALON: '#eb2f96',
  };
  return businessTypeConfig[type as keyof typeof businessTypeConfig] || '#666';
};
</script>

<style lang="less" scoped>
.detail-content {
  .properties-section,
  .pricing-section {
    margin-bottom: 16px;

    .ant-btn {
      margin-bottom: 12px;
    }

    pre {
      background: #f5f5f5;
      padding: 12px;
      border-radius: 4px;
      font-size: 12px;
      line-height: 1.4;
      overflow-x: auto;
    }
  }

  .logs-section {
    .log-item {
      .log-title {
        font-weight: 500;
        margin-bottom: 4px;
      }

      .log-time {
        font-size: 12px;
        color: #888;
        margin-bottom: 4px;
      }

      .log-content {
        font-size: 14px;
        color: #666;
      }
    }
  }
}
.resource-detail-drawer {
  width: 700px !important;
}
</style>
